<template>
  <div class="login-card">
    <div class="login-header">
      <h2>欢迎回来</h2>
      <p>请登录您的账号以继续</p>
    </div>
    
    <!-- 登录表单 -->
    <form @submit.prevent="handleLogin" class="login-form">
      <div class="form-group">
        <label for="username">
          <i class="fas fa-user"></i>
          用户名
        </label>
        <input 
          type="text" 
          id="username" 
          v-model="loginForm.username" 
          required 
          placeholder="请输入用户名"
          autocomplete="username"
        >
      </div>
      
      <div class="form-group">
        <label for="password">
          <i class="fas fa-lock"></i>
          密码
        </label>
        <input 
          type="password" 
          id="password" 
          v-model="loginForm.password" 
          required 
          placeholder="请输入密码"
          autocomplete="current-password"
        >
      </div>
      
      <div class="form-options">
        <label class="remember-me">
          <input type="checkbox" v-model="loginForm.remember">
          <span>记住我</span>
        </label>
        <a href="#" class="forgot-password" @click.prevent="forgotPassword">忘记密码？</a>
      </div>
      
      <button type="submit" :disabled="loading" class="login-button">
        <span v-if="!loading">登录</span>
        <span v-else class="loading-spinner"></span>
      </button>
      
      <div class="social-login">
        <p>使用第三方账号登录</p>
        <div class="social-icons">
          <a href="#" class="social-icon wechat" @click.prevent="socialLogin('wechat')">
            <i class="fab fa-weixin"></i>
          </a>
          <a href="#" class="social-icon qq" @click.prevent="socialLogin('qq')">
            <i class="fab fa-qq"></i>
          </a>
          <a href="#" class="social-icon weibo" @click.prevent="socialLogin('weibo')">
            <i class="fab fa-weibo"></i>
          </a>
        </div>
      </div>
      
      <div class="register-link">
        还没有账号？ <router-link to="/auth/register">立即注册</router-link>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'

// 路由实例
const router = useRouter()
const route = useRoute()
// 用户状态管理
const userStore = useUserStore()

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  remember: false
})

// 加载状态
const loading = ref(false)

// 检查是否已登录，如果已登录则跳转到首页
onMounted(() => {
  if (userStore.isLoggedIn) {
    router.push('/profile')
  }
})

// 登录处理
const handleLogin = async () => {
  // 表单验证
  if (!loginForm.username.trim()) {
    ElMessage.warning('请输入用户名')
    return
  }
  
  if (!loginForm.password) {
    ElMessage.warning('请输入密码')
    return
  }

  try {
    loading.value = true
    // 调用store中的登录方法
    const success = await userStore.login({
      username: loginForm.username,
      password: loginForm.password
    })

    if (success) {
      ElMessage.success('登录成功')
      
      // 如果有重定向参数，则跳转到该页面
      const redirectPath = route.query.redirect || '/profile'
      router.push(redirectPath)
    } else {
      ElMessage.error('登录失败，请检查用户名和密码')
    }
  } catch (error) {
    console.error('登录异常:', error)
    ElMessage.error(error.message || '登录失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 忘记密码处理
const forgotPassword = () => {
  ElMessage.info('忘记密码功能开发中...')
}

// 社交媒体登录
const socialLogin = (platform) => {
  ElMessage.info(`${platform}登录功能开发中...`)
}
</script>

<style scoped>
.login-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
  transition: all 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h2 {
  color: #333;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.login-header p {
  color: #666;
  font-size: 0.9rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s;
}

.form-group input:focus {
  border-color: #6e8efb;
  box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.1);
  outline: none;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.remember-me input {
  margin-right: 0.5rem;
}

.forgot-password {
  color: #6e8efb;
  text-decoration: none;
  transition: color 0.3s;
}

.forgot-password:hover {
  color: #4a6eeb;
  text-decoration: underline;
}

.login-button {
  width: 100%;
  padding: 0.85rem;
  background-color: #6e8efb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-button:hover {
  background-color: #5a77e0;
}

.login-button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.social-login {
  margin: 1.5rem 0;
  text-align: center;
}

.social-login p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  position: relative;
}

.social-login p::before,
.social-login p::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 25%;
  height: 1px;
  background-color: #ddd;
}

.social-login p::before {
  left: 0;
}

.social-login p::after {
  right: 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  transition: transform 0.3s, box-shadow 0.3s;
}

.social-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.wechat {
  background-color: #07C160;
}

.qq {
  background-color: #12B7F5;
}

.weibo {
  background-color: #E6162D;
}

.register-link {
  text-align: center;
  margin-top: 1.5rem;
  color: #666;
  font-size: 0.9rem;
}

.register-link a {
  color: #6e8efb;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.register-link a:hover {
  color: #4a6eeb;
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .login-card {
    padding: 1.5rem;
  }
  
  .login-header h2 {
    font-size: 1.5rem;
  }
  
  .social-icon {
    width: 35px;
    height: 35px;
  }
}
</style> 